<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>帮助中心 - 探索世界后台管理系统</title>
  <style>
    :root {
      --primary-color: #2c5f3e;
      --secondary-color: #4a7c59;
      --accent-color: #8fbc8f;
      --text-color: #333;
      --bg-color: #f0f8f0;
      --card-bg: #ffffff;
      --border-color: #8fbc8f;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", Arial, sans-serif;
      background-color: var(--bg-color);
      color: var(--text-color);
      line-height: 1.6;
      padding: 0;
      height: 100%;
    }

    .container {
      max-width: 100%;
      background-color: var(--card-bg);
      padding: 20px;
      height: 100%;
      overflow-y: auto;
    }

    header {
      text-align: center;
      margin-bottom: 30px;
      padding-bottom: 15px;
      border-bottom: 2px solid var(--accent-color);
    }

    h1 {
      font-size: 2.2em;
      color: var(--primary-color);
      margin-bottom: 10px;
    }

    .subtitle {
      color: var(--secondary-color);
      font-size: 1.1em;
    }

    .section {
      margin-bottom: 30px;
      background-color: #fdfdfd;
      padding: 20px;
      border-radius: 6px;
      border-left: 4px solid var(--accent-color);
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    }

    .section-title {
      color: var(--primary-color);
      font-size: 1.5em;
      margin-bottom: 15px;
      padding-bottom: 8px;
      border-bottom: 1px dashed var(--accent-color);
    }

    p {
      margin-bottom: 12px;
      font-size: 1em;
      line-height: 1.8;
    }

    ul, ol {
      margin-left: 20px;
      margin-bottom: 15px;
    }

    li {
      margin-bottom: 8px;
    }

    .faq-item {
      margin-bottom: 20px;
      padding-bottom: 15px;
      border-bottom: 1px dashed #ddd;
    }

    .faq-question {
      font-weight: bold;
      color: var(--primary-color);
      margin-bottom: 8px;
      font-size: 1.1em;
    }

    .faq-answer {
      margin-left: 15px;
    }

    .shortcut-list {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
      gap: 15px;
      margin-top: 15px;
    }

    .shortcut-card {
      background: #f8f9fa;
      border: 1px solid var(--accent-color);
      border-radius: 6px;
      padding: 15px;
      transition: all 0.3s ease;
    }

    .shortcut-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
      border-color: var(--primary-color);
    }

    .shortcut-card h4 {
      color: var(--primary-color);
      margin-bottom: 8px;
    }

    .contact-info {
      background-color: #f0f8f0;
      padding: 15px;
      border-radius: 6px;
      border-left: 4px solid var(--accent-color);
      margin: 20px 0;
    }

    footer {
      text-align: center;
      margin-top: 40px;
      color: var(--secondary-color);
      font-size: 0.9em;
      padding-top: 15px;
      border-top: 1px solid var(--accent-color);
    }

    @media (max-width: 768px) {
      .container {
        padding: 10px;
      }
      
      h1 {
        font-size: 1.8em;
      }
      
      .section {
        padding: 15px;
      }
      
      .shortcut-list {
        grid-template-columns: 1fr;
      }
    }
  </style>
</head>
<body>
<div class="container">
  <header>
    <h1>帮助中心</h1>
    <p class="subtitle">探索世界后台管理系统使用指南</p>
  </header>

  <div class="section">
    <h2 class="section-title">系统概述</h2>
    <p>"探索世界"旅游管理系统是一个基于SpringBoot + MyBatis + Vue的前后端分离旅游管理平台，为景区、游客和管理员提供完整的旅游服务解决方案。</p>
    <p>本系统采用现代化的技术架构，实现了高效的用户交互体验和数据管理能力。帮助中心为您提供系统使用的详细指导。</p>
  </div>

  <div class="section">
    <h2 class="section-title">快速入门</h2>
    <div class="shortcut-list">
      <div class="shortcut-card">
        <h4>登录系统</h4>
        <p>访问登录页面，输入用户名和密码即可进入后台管理系统。</p>
      </div>
      
      <div class="shortcut-card">
        <h4>导航菜单</h4>
        <p>左侧树形菜单提供了所有功能模块的入口，点击相应菜单可打开功能页面。</p>
      </div>
      
      <div class="shortcut-card">
        <h4>多标签页</h4>
        <p>系统支持多标签页操作，可以在不同功能间快速切换而无需重新加载。</p>
      </div>
      
      <div class="shortcut-card">
        <h4>个人信息</h4>
        <p>右上角菜单可进行密码修改和退出登录操作。</p>
      </div>
    </div>
  </div>

  <div class="section">
    <h2 class="section-title">常用功能说明</h2>
    <div class="faq-item">
      <div class="faq-question">如何管理景区信息？</div>
      <div class="faq-answer">
        <p>在左侧菜单中找到"景区管理" -> "景区信息管理"，可以添加、编辑、删除景区信息，包括景区名称、描述、地址等基本信息。</p>
      </div>
    </div>
    
    <div class="faq-item">
      <div class="faq-question">如何处理订单？</div>
      <div class="faq-answer">
        <p>进入"订单管理"模块，可以查看所有订单状态，包括待支付、已支付、已完成、已取消等。可以对订单进行审核、退款等操作。</p>
      </div>
    </div>
    
    <div class="faq-item">
      <div class="faq-question">如何管理用户权限？</div>
      <div class="faq-answer">
        <p>通过"权限管理"模块可以管理用户、角色和菜单权限。为不同角色分配相应的菜单权限，实现细粒度的权限控制。</p>
      </div>
    </div>
    
    <div class="faq-item">
      <div class="faq-question">如何查看系统日志？</div>
      <div class="faq-answer">
        <p>在"系统监控"模块中有登录日志和操作日志两个子模块，可以查看用户的登录记录和关键操作记录，便于审计和问题追踪。</p>
      </div>
    </div>
  </div>

  <div class="section">
    <h2 class="section-title">常见问题</h2>
    <div class="faq-item">
      <div class="faq-question">页面加载缓慢怎么办？</div>
      <div class="faq-answer">
        <p>请检查网络连接是否正常，清除浏览器缓存后再试。如问题持续存在，请联系技术支持。</p>
      </div>
    </div>
    
    <div class="faq-item">
      <div class="faq-question">无法保存数据怎么办？</div>
      <div class="faq-answer">
        <p>请检查必填项是否填写完整，数据格式是否正确。如果仍有问题，请查看页面是否有错误提示信息，或联系技术支持。</p>
      </div>
    </div>
    
    <div class="faq-item">
      <div class="faq-question">如何修改个人密码？</div>
      <div class="faq-answer">
        <p>点击右上角菜单中的"修改密码"选项，在弹出的对话框中输入旧密码和新密码即可完成修改。</p>
      </div>
    </div>
  </div>

  <div class="section">
    <h2 class="section-title">技术支持</h2>
    <div class="contact-info">
      <p><strong>技术支持邮箱：</strong>support@explore-world.com</p>
      <p><strong>服务时间：</strong>周一至周五 9:00-18:00</p>
      <p><strong>紧急问题：</strong>请拨打 400-XXX-XXXX（工作时间）</p>
    </div>
    <p>如果您在使用过程中遇到任何问题，或对系统有任何建议，欢迎随时联系我们。我们将竭诚为您服务，不断提升产品体验。</p>
  </div>

  <footer>
    <p>© 2025 探索世界后台管理系统</p>
    <p>版本号：v1.0.0</p>
  </footer>
</div>
</body>
</html>